<template>
  <div>
    <Row v-show="!showDeviceDetailView">
      <Row class="list_row" style="margin-top: 0px; min-height: 400px">
        <Row style="margin: 5px 0px 10px 0px">
          <Select
            v-model="selTrainCenterId"
            filterable
            :placeholder="$t('common.trainSePlaceTips')"
            style="width: 200px; margin-right: 20px"
            v-show="isCanChooseTc"
          >
            <Option v-for="tc in trainCenterList" :value="tc.id" :key="tc.id">{{
              tc.name
            }}</Option>
          </Select>
          <Input
            v-model="searchKeyword"
         :placeholder="$t('deviceP.phoneOrStudentTips')" 
            style="width: 200px; margin-right: 20px"
          />
          <Button
            class="btnWhite"
            type="primary"
            icon="ios-search"
            style="margin-right: 20px"
            @click="search"
            >{{$t('search')}}</Button
          >
          <Button
            class="btnWhite"
            type="primary"
            icon="md-add"
            @click="showAddModal"
            >{{$t('deviceP.inviteBtn')}} </Button
          >
        </Row>
        <Table
          :columns="trainerColumn"
          border
          :data="dataList"
          stripe
          :no-data-text="noDataMsg"
          class="my-table"
        >
          <template slot-scope="{ row, index }" slot="seq">
            {{ (currentPage - 1) * pageSize + index + 1 }}
          </template>
          <template slot-scope="{ row, index }" slot="status">
            <Icon
              v-if="row.status == 0"
              custom="iconfont icon-device"
              size="24"
              color="#aaaaaa"
            />
            <Icon
              v-else
              custom="iconfont icon-device"
              size="24"
              color="#2d8cf0"
            />
          </template>
        </Table>
        <div class="div_page">
          <Page
            :total="totalCount"
            :current="currentPage"
            :page-size="pageSize"
            show-total
            show-elevator
            prev-text="<"
            next-text=">"
            @on-change="pageChg"
          />
        </div>
      </Row>
    </Row>

    <!-- 邀请学员弹窗 -->
    <Modal
      v-model="entityModelVisiable"
      :mask-closable="false"
      width="700"
      :title="$t('deviceP.inviteBtn')"
    >
      <Row class="list_row" style="margin-top: 0px">
        <Row style="margin: 5px 0px 10px 0px">
          <Input
            v-model="searchTrainerKeyword"
            :placeholder="$t('deviceP.phoneOrStudentTips')"
            style="width: 200px; margin-right: 20px"
          />
          <Button
            type="primary"
            icon="ios-search"
            style="margin-right: 20px"
            @click="searchTrainer"
            >{{$t('search')}}</Button
          >
        </Row>
        <Table
          :columns="inviteTrainerColumn"
          border
          :data="trainerList"
          stripe
          style="min-height: 278px"
        >
          <template slot-scope="{ row, index }" slot="seq">
            {{ (currentPage - 1) * pageSize + index + 1 }}
          </template>
        </Table>
        <div class="div_page">
          <Page
            :total="xyTotalCount"
            :current="xyCurrentPage"
            :page-size="xyPageSize"
            show-total
            show-elevator
            prev-text="<"
            next-text=">"
            @on-change="trainerPageChg"
          />
        </div>
      </Row>
      <div slot="footer" style="text-align: center">
        <Button @click="cancelInviteTrainer">{{$t('cancel')}}</Button>
      </div>
      <div slot="close" style="text-align: center">
        <i class="ivu-icon ivu-icon-ios-close" @click="cancelInviteTrainer"></i>
      </div>
    </Modal>

    <!-- 分配教练弹窗 -->
    <Modal
      v-model="assignCoachModelVisiable"
      :mask-closable="false"
      width="650"
      :title="$t('trainerP.assignCoachBtn')"
    >
      <div>
        <Transfer
          ref="myTransfer"
          :data="coachList"
          style="margin: 0px 10px" 
          :titles="[ this.$t('trainerP.coachList'), this.$t('trainerP.assignedCoach')]"
          :list-style="listStyle"
          filterable
          :filter-method="searchCoach"
          :target-keys="selCoachIds"
          :render-format="transferRender"
          @on-change="transferOnChange"
        ></Transfer>
      </div>
      <div slot="footer" style="text-align: center">
        <Button @click="cancelAssignCoach">{{$t('cancel')}}</Button>
        <Button
          type="primary"
          @click="saveAssignCoach"
          :loading="saveLoading"
          style="margin-left: 15px"
        >
          <span v-if="!saveLoading">{{$t('save')}}</span>
          <span v-else>{{$t('save')}}....</span>
        </Button>
      </div>
      <div slot="close" style="text-align: center">
        <i class="ivu-icon ivu-icon-ios-close" @click="cancelAssignCoach"></i>
      </div>
    </Modal>

    <!-- 学员详细信息 -->
    <Modal
      v-model="trainerInfoModelVisiable"
      :mask-closable="false"
      width="750"
      :title="$t('trainerP.traineeInfo')"
    >
      <div class="detail_div" >
        <Row>
          <Col span="4" class="form_filed">{{$t('common.teamName')}}:</Col>
          <Col span="8" class="form_filed_val"><span class="wrapBox">{{
            trainerInfoEntity.sportsTeamName
          }}</span></Col>
           <Col span="4" class="form_filed">{{$t('common.traninerCenter')}} :</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{trainerInfoEntity.trainCenterName}}</span></Col
          >
        
        </Row>
        <Row>
          <Col span="4" class="form_filed"> {{$t('common.trainerName')}} :</Col>
          <Col span="8" class="form_filed_val"><span class="wrapBox">{{
            trainerInfoEntity.nickName
          }}</span></Col>
        
           <Col span="4" class="form_filed">{{$t('trainerP.traineeLevel')}}:</Col>
          <Col span="8" class="form_filed_val">
            <Select v-model="trainerInfoEntity.level" :placeholder="$t('trainerP.traineeplaceTips')" style="width:100%;" @on-change="changeLevelHandle">
          <Option v-for="tc in levelList" :value="tc.val" :key="tc.val">{{tc.label}}</Option>
        </Select>
        </Col>
         
        </Row>
        <Row>
          <Col span="4" class="form_filed">{{$t('common.gender')}}:</Col>
          <Col span="8" class="form_filed_val">
            <span class="wrapBox" v-if="trainerInfoEntity.sex == 1">{{$t('common.male')}}</span>
            <span class="wrapBox" v-if="trainerInfoEntity.sex == 2">{{$t('common.female')}}</span>
          </Col>
          <Col span="4" class="form_filed">{{$t('common.birthday')}}:</Col>
          <Col span="8" class="form_filed_val"><span class="wrapBox">{{
            trainerInfoEntity.birthday
          }}</span></Col>
        </Row>
        <Row>
          <Col span="4" class="form_filed">{{$t('common.height')}}:</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{ trainerInfoEntity.trainerHealthData.height }}cm</span></Col
          >
          <Col span="4" class="form_filed">{{$t('common.weight')}}:</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{ trainerInfoEntity.trainerHealthData.weight }}kg</span></Col
          >
        </Row>
        <Row>
          <Col span="4" class="form_filed">{{$t('common.bust')}}:</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{ trainerInfoEntity.trainerHealthData.bust }}cm</span></Col
          >
          <Col span="4" class="form_filed">{{$t('common.waistline')}}:</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{ trainerInfoEntity.trainerHealthData.waistline }}cm</span></Col
          >
        </Row>
        <Row>
          <Col span="4" class="form_filed">{{$t('common.heartRate')}}:</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{ trainerInfoEntity.trainerHealthData.heartRate }} {{$t('common.tmUnit')}}</span></Col
          >
          <Col span="4" class="form_filed">{{$t('common.maxHeartRate')}}:</Col>
          <Col span="8" class="form_filed_val"
            ><span class="wrapBox">{{ trainerInfoEntity.trainerHealthData.maxHeartRate }}{{$t('common.tmUnit')}}</span></Col
          >
        </Row>
        <Row>
          <Col span="4" class="form_filed">{{$t('common.facePhotoUrl')}} :</Col>
          <Col span="8" class="form_filed_val"
            >
            <img v-if="trainerInfoEntity.facePhotoUrl"
              style="width: 67px; height: 55px"
              :src="trainerInfoEntity.facePhotoUrl"
          />
        <div v-else class="avatorBox"></div>
        </Col>

        <Col span="4" class="form_filed">{{$i18n.locale === 'zh-CN' ? $t('common.phone') :  $t('common.mail')  }}:</Col>
          <Col span="8" class="form_filed_val"><span class="wrapBox">{{
           $i18n.locale === 'zh-CN' ?  trainerInfoEntity.phone : trainerInfoEntity.mail
          }}</span></Col>
        </Row>
        <Row>
         
          <Col span="4" class="form_filed"></Col>
          <Col span="8" class="form_filed_val"
            ></Col>
            <Col span="4" class="form_filed"> </Col>
          <Col span="8" class="form_filed_val"
            ><span @click="showTest" class="testBtn">{{$t('trainerP.testBtn')}}</span></Col
          >
        </Row>
      </div>
     
      <div slot="footer" style="text-align: center">
        <Button @click="trainerInfoModelVisiable = false">{{$t('cancel')}}</Button>
      </div>
    </Modal>
    <!-- 测试项目 -->
    <Modal
      v-model="testListVisiable"
      :mask-closable="false"
      width="1000"
      :title="$t('trainerP.testBtn')"
      
    >
    <div slot="footer"></div>
      <Row style="margin: 5px 0px 10px 0px;display:flex;justify-content:end;">
        <Button
          class="btnWhite"
          type="primary"
          icon="md-add"
        
          @click="addTest"
          >{{$t('common.addBtn')}}</Button
        >
      </Row>
      <Table
        :columns="testColumn"
        border
        :data="testList"
        stripe
        style="min-height: 278px"
      >
        <template slot-scope="{ row, index }" slot="seq">
          {{ (currentPage - 1) * pageSize + index + 1 }}
        </template>
      </Table>
      <div class="div_pageModal">
        <Page
          :total="totalCountTest"
          :current="currentPageTest"
          :page-size="pageSizeTest"
          show-total
          show-elevator
          prev-text="<"
          next-text=">"
          @on-change="testPageChg"
        />
      </div>
    </Modal>
    <!-- 测试编辑 -->
    <Modal
      v-model="testDetailVisiable"
      :mask-closable="false"
      width="560"
      :title="$t('common.editBtn')"
    >
    <div class="boxForm">
      <Form ref="testFormRef" :model="testForm" :label-width="120"  :rules="testFormRules">
        <FormItem :label="$t('trainerP.projectName')" prop="name" >
          <Input v-model="testForm.name" :placeholder="$t('trainerP.projectPlaceTips')" :disabled="testForm.id!==''" ></Input>
        </FormItem>
        <FormItem :label="$t('trainerP.lgraces')" prop="latestGrades">
          <Input
            v-model="testForm.latestGrades"
            :placeholder="$t('trainerP.lgracesTips')"
          ></Input>
        </FormItem>
        <FormItem :label="$t('trainerP.bgraces')" prop="optimalGrades">
          <Input
            disabled
            v-model="testForm.optimalGrades"
            :placeholder="$t('trainerP.bgracesTips')"
          ></Input>
        </FormItem>
        <FormItem :label="$t('trainerP.ltgraces')" prop="lastGrades">
          <Input
            disabled
            v-model="testForm.lastGrades"
            :placeholder="$t('trainerP.ltgracesTips')" 
          ></Input>
        </FormItem>
      </Form>
    </div>
      <div slot="footer" style="text-align: center">
        <Button @click="testSubmit">{{$t('yes')}}</Button>
        <Button @click="testDetailVisiable = false">{{$t('cancel')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import TrainCenterApi from "@/api/trainCenterApi";
import UserApi from "@/api/userApi";
import TrainerTestProjectApi from "@/api/trainerTestProjectApi";
import TrainerApi from "@/api/trainerApi";
import { isEmpty } from "@/libs/util";

export default {
  data() {
    return {
      trainerInfoEntity: {
        trainerHealthData: {},
      },
      testFormRules: {
        name: [
          {
            required: true,
            message: this.$t("common.projectMustTips"),
            trigger: "blur",
          },
        ],},
      levelList:[
      {
        val:'',
        label:''
      },
    
        {
        val:'1',
        label:this.$t('trainerP.primary'),
      },
      {
        val:'2',
        label:this.$t('trainerP.intermediate'),
      },
      {
        val:'3',
        label:this.$t('trainerP.senior'),
      },
    ],
      testForm: {
        lastGrades: 0,
        latestGrades: 0,
        name: "",
        optimalGrades: 0,
      },
      listStyle:{
       width:'250px'
      },
      testList: [],
      testListVisiable: false,
      testDetailVisiable: false,
      trainerInfoModelVisiable: false,
      xyPageSize: 5,
      xyCurrentPage: 1,
      xyTotalCount: 0,
      trainerPageSize: 5,
      trainerCurrentPage: 1,
      trainerTotalCount: 0,
      trainerList: [],
      searchTrainerKeyword: "",
      assignCoachModelVisiable: false,
      coachList: [],
      selCoachIds: [], // 当前学员已选的教练
      selTrainerId: "", // 当前选中的学员
      saveLoading: false,
      searchKeyword: "",
      noDataMsg: this.$t('common.noData'),
      isCanChooseTc: false,
      selTrainCenterId: "",
      trainCenterList: [],
      showDeviceDetailView: false,
      entityModelVisiable: false,
      totalCount: 20,
      totalCountTest: 0,
      currentPageTest: 1,
      currentPage: 1,
      pageSize: 5,
      pageSizeTest: 5,
      dataList: [],
      inviteTrainerColumn: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          render: (h, params) => {
            return h(
              "span",
              {
                class: "sortBlock",
              },
              params.index + 1
            );
          },
        },
        {
          title:this.$t('common.avatar'),
          key: "avatar",
          width: '85',
          render: (h, params) => {
            // return h('strong', params.row.avatar)
            if (!params.row.avatar) {
             
             return h("div", {
                   class: "avatorBox",
                 },
           )
           }
            return h("img", {
              style: {
                // 样式
                width: "20px",
                border: "1px solid",
              },
              attrs: {
                src: params.row.avatar,
              },
              on: {
                click: () => {
                  this.showBigImg(params.row.avatar);
                },
              },
            });
          },
        },
        {
          title: this.$t('common.trainerName'), 
          key: "nickName",
        },

        {
          title: this.$i18n.locale === 'zh-CN' ? this.$t('common.phone') : this.$t('common.mail'), 
          key: this.$i18n.locale === 'zh-CN' ? "phone" : "mail",
        },
        {
          title:this.$t('common.optColumn'),
          key: "action",
          width: '180',
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  props: {
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                    background: "#484a52",
                    padding: " 5px 10px",
                    color: "#fff",
                    display: "inline-block",
                    borderRadius: "5px",
                    cursor: "pointer",
                  },
                  on: {
                    click: () => {
                      this.inviteTrainer(params.row);
                    },
                  },
                },
                this.$t('trainerP.joinBtn'),
          
              ),
            ]);
          },
        },
      ],
      testColumn: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          render: (h, params) => {
            return h(
              "span",
             
              params.index + 1
            );
          },
        },
        {
          title: this.$t('trainerP.projectName'),
          key: "name",
        },
        {
          title: this.$t('trainerP.bgraces'),
          key: "optimalGrades",
        },
        {
          title:this.$t('trainerP.ltgraces'),
          key: "lastGrades",
        },
        {
          title: this.$t('trainerP.lgraces'),
          key: "latestGrades",
        },
        {
          title: this.$t('common.updateTime'),
          width: '165',
          key: "updateTime",
        },

        {
          title: this.$t('common.optColumn'), 
          key: "action",
          width: '180',
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  props: {
                   
                    size: "small",
                  },
                  class:'testBtn',
                  style: {
                    // marginRight: "15px",
                    background: "#363840",
                    padding: " 5px 10px",
                    color: "#fff",
                    display: "inline-block",
                    borderRadius: "5px",
                    cursor: "pointer",
                  },
                  on: {
                    click: () => {
                      this.editTest(params.row);
                    },
                  },
                },
                this.$t('common.editBtn')
              ),
            ]);
          },
        },
      ],
      trainerColumn: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          render: (h, params) => {
            return h(
              "span",
              {
                class: "sortBlock",
              },
              params.index + 1
            );
          },
        },

        {
          title: this.$t('common.avatar'), 
          key: "avatar",
       
          render: (h, params) => {
           
            if (!params.row.avatar) {
             
              return h("div", {
                    class: "avatorBox",
                  },
            )
            }
            return h("img", {
              style: {
                // 样式
                width: "20px",
                border: "1px solid",
              },
              attrs: {
                src: params.row.avatar,
              },
              on: {
                click: () => {
                  this.showBigImg(params.row.avatar);
                },
              },
            });
          },
        },
        {
          title: this.$t('common.trainerName'), 
          key: "nickName",
          
        },
        {
          title: this.$i18n.locale === 'zh-CN' ? this.$t('common.phone') : this.$t('common.mail'), 
          key: this.$i18n.locale === 'zh-CN' ? "phone" : "mail",
        },
        {
          title: this.$t('coach'), 
          key: "coachNames",
        },
        {
          title: this.$t('trainerP.createTime'),
          key: "createTime",
        },
        {
          title: this.$t('common.optColumn'), 
          key: "action",
          width: '350',
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  class: "btnBlue",
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.showTrainerInfo(params.row.id);
                    },
                  },
                },
                this.$t('trainerP.traineeInfo')
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  class: "btnYellow",
                  on: {
                    click: () => {
                      this.showAssignModal(params.row);
                    },
                  },
                },
                this.$t('trainerP.assignCoachBtn')
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  class: "btnRed",
                  on: {
                    click: () => {
                      this.del(params.row);
                    },
                  },
                },
                this.$t('trainerP.unbindBtn')
              ),
            ]);
          },
        },
      ],
    };
  },
  watch: {
    selTrainCenterId: function (val) {
      this.initCoachList();
    },
  },
  created() {
    this.initFunc();
  },
  methods: {
    changeLevelHandle(v){
      
      this.trainerInfoEntity.level=v
      this.updateLevel()
      
    },
    testSubmit() {
      this.$refs.testFormRef.validate((valid) => {
        if (valid) {
      const postData = {
        ...this.testForm,
        trainerId: this.trainerInfoEntity.id,
      };
      const doPost = this.testForm.id
        ? TrainerTestProjectApi.update(postData)
        : TrainerTestProjectApi.save(postData);
      doPost.then(
        (response) => {
          this.saveLoading = false;
          if (!this.testForm.id) {
            this.$Message.success(this.$t('common.addSuc')); 
            
          } else {
            this.$Message.success(this.$t('common.editSuc'));
          }
        
          this.$refs.testFormRef.resetFields();
          this.testDetailVisiable = false;
          this.fetchTestDataList();
        },
        (error) => {
          this.saveLoading = false;
          this.$Message.error(error.response.data.msg);
        }
      );
    }})
    },
    editTest(row) {
      this.testDetailVisiable = true;
      //深拷贝，才不会影响原数值
      const row1=JSON.parse(JSON.stringify(row));
      this.testForm = row1;
    },
    // 重置邀请学员的查询
    cancelInviteTrainer() {
      this.searchTrainerKeyword = "";
      this.entityModelVisiable = false;
    },
    // 重置分配教练的查询
    cancelAssignCoach() {
      this.assignCoachModelVisiable = false;
      if (this.$refs.myTransfer) {
        this.$refs.myTransfer.$children["0"]._data.query = "";
        // 清空右边搜索
        this.$refs.myTransfer.$children["2"]._data.query = "";
      }
    },
    updateLevel(){
      
      UserApi.levelPeople(this.trainerInfoEntity.id,this.trainerInfoEntity.level).then( (res) => {
        
        // if(res.data.code ==200){
        //   this.$Message.success('更新成功！')
        // }
         
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        })
    },
    initCoachList() {
      TrainCenterApi.queryTrainCenterCoachs(this.selTrainCenterId).then(
        (res) => {
          const data = res.data.data;
          for (var i = 0; i < data.coachs.length; i++) {
            var coach = data.coachs[i];
            coach["key"] = coach.id;
          }
          this.coachList = data.coachs;
         
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    showBigImg(url) {
      window.open(url);
    },
    initFunc() {
      TrainCenterApi.userTrainCenterScope().then(
        (res) => {
          const data = res.data.data;
          if (data.canSelect == "1") {
            this.isCanChooseTc = true;
            this.trainCenterList = data.list;
            if (this.trainCenterList.length > 0) {
              this.selTrainCenterId = this.trainCenterList[0].id;
            }
          } else {
            this.selTrainCenterId = data.trainCenterId;
          }
          this.search();
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    search() {
      this.currentPage = 1;
      this.fetchDataList();
    },
    fetchDataList() {
      if (isEmpty(this.selTrainCenterId)) {
        this.$Message.error(this.$t('common.trainSePlaceTips'));
        return;
      }
      this.noDataMsg = this.$t('common.loading');
      this.dataList = [];
      var param = {
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        trainCenterId: this.selTrainCenterId,
      };
      if (this.searchKeyword.length > 0) {
        param.nickName = this.searchKeyword;
      }
      TrainerApi.pageResult(param).then(
        (res) => {
          this.dataList = res.data.data.pageResult.items;
          this.totalCount = res.data.data.pageResult.totalCount;
          this.noDataMsg = this.$t('common.noData');
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    fetchTestDataList() {
      this.testList = [];
      var param = {
        pageSize: this.pageSizeTest,
        currentPage: this.currentPageTest,
        trainerId: this.trainerInfoEntity.id,
      };

      TrainerTestProjectApi.pageResult(param).then(
        (res) => {
          this.testList = res.data.data.pageResult.items;
          this.totalCountTest = res.data.data.pageResult.totalCount;
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    pageChg(selPage) {
      this.currentPage = selPage;
      this.fetchDataList();
    },
    del(row) {
      this.$Modal.confirm({
        title:this.$t('trainerP.unbindPromot'),
        content:this.$t('trainerP.unbindCt'),
        okText: this.$t('trainerP.unbindBtn'),
        cancelText:  this.$t('cancel'),
        onOk: () => {
          this.doDel(row.id);
        },
      });
    },
    doDel(trainerId) {
      this.$Spin.show();
      TrainerApi.unbind(this.selTrainCenterId, trainerId).then(
        (res) => {
          this.$Spin.hide();
          this.$Message.success(this.$t('common.unBindSuc'));
          this.fetchDataList();
        },
        (error) => {
          this.$Spin.hide();
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    transferRender (coach) {
      if(!coach.avatar){
        if(this.$i18n.locale === 'zh-CN'){
          return `<div class="tranBox"><div class="avatorBox"></div> ${coach.nickName}  ( ${coach.phone} )</div>`
        }else{
          return `<div class="tranBox"><div class="avatorBox"></div> ${coach.nickName}  ( ${coach.mail} )</div>`
        }
      
      }else{
        if(this.$i18n.locale === 'zh-CN'){
          return `<div class="tranBox"> <img src="${coach.avatar}" style="width:20px;height:20px;" /> ${coach.nickName}  ( ${coach.phone} )</div>`
        }else{
          return `<div class="tranBox"> <img src="${coach.avatar}" style="width:20px;height:20px;" /> ${coach.nickName}  ( ${coach.mail} )</div>`
        }
      
      }
      
    },
    transferOnChange(newTargetKeys, direction, moveKeys) {
      this.selCoachIds = newTargetKeys;
    },
    searchCoach(data, query) {
      // console.log("data:" + JSON.stringify(data))
      if(this.$i18n.locale === 'zh-CN'){
        return data.nickName.indexOf(query) > -1 || data.phone.indexOf(query) > -1
      }else{
        return data.nickName.indexOf(query) > -1 || data.mail.indexOf(query) > -1
      }
    },
    showAssignModal(row) {
      this.assignCoachModelVisiable = true;
      this.selCoachIds = row.coachIdList;
      this.selTrainerId = row.id;
      
    },
    saveAssignCoach() {
      if (this.selCoachIds.length == 0) {
        this.$Modal.confirm({
          title: this.$t('trainerP.coachAssignTitleConfirm'),
          content:this.$t('trainerP.assignTisText') ,
          okText: this.$t('yes'),
          cancelText: this.$t('cancel'),
          onOk: () => {
            this.doAssign();
          },
        });
      } else {
        this.doAssign();
      }
    },
    doAssign() {
      this.saveLoading = true;
      const coachIds = this.selCoachIds.join(",");
      TrainerApi.updateTrainerCoach(
        this.selTrainCenterId,
        this.selTrainerId,
        coachIds
      ).then(
        (res) => {
          this.saveLoading = false;
          this.assignCoachModelVisiable = false;
          this.$Message.success(this.$t('trainerP.assignSuc'));
          this.fetchDataList();
        },
        (error) => {
          this.saveLoading = false;
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    showAddModal() {
      this.entityModelVisiable = true;
      this.searchTrainer();
    },
    saveOrUpdate() {},

    testPageChg(selPage) {
      this.currentPageTest = selPage;
      
      this.fetchTestDataList();
    },
    trainerPageChg(selPage) {
      
      this.xyCurrentPage = selPage;
      this.searchTrainer();
    },
    searchTrainer() {
      this.trainerList = [];
      var param = {
        currentPage: this.xyCurrentPage,
        trainCenterId: this.selTrainCenterId,
        pageSize: this.xyPageSize
      };
    
      if (this.searchTrainerKeyword.length > 0) {
        param.searchKeyword = this.searchTrainerKeyword;
      }
      TrainerApi.searchNotJoinedTrainers(param).then(
        (res) => {
          this.trainerList = res.data.data.pageResult.items;
          this.xyTotalCount = res.data.data.pageResult.totalCount;
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    inviteTrainer(row) {
      this.$Modal.confirm({
        title: this.$t('trainerP.inviteTitleConfirm'),
        content: this.$i18n.locale === "zh-CN" ? "确认邀请学员：【" + row.nickName + "】加入吗?" : "Are you sure to invite student [" + row.nickName +"] to join?",
        okText: this.$t('trainerP.inviteBtn'),
        cancelText:  this.$t('cancel'),
        onOk: () => {
          this.doInvite(row.id);
        },
      });
    },
    doInvite(trainerId) {
      this.$Spin.show();
      TrainerApi.invite(this.selTrainCenterId, trainerId).then(
        (res) => {
          this.$Spin.hide();
          this.entityModelVisiable = false;
          this.$Message.success(this.$t("trainerP.iniviteSuc"));
        },
        (error) => {
          this.$Spin.hide();
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    showTrainerInfo(trainerId) {
      this.trainerInfoModelVisiable = true;
      // 加载数据
      TrainerApi.getTrainerDetail(trainerId).then(
        (res) => {
          console.log("返回数据：" + JSON.stringify(res.data.data));
          this.trainerInfoEntity = res.data.data;
        },
        (error) => {
          this.$Message.error(error.response.data.msg);
        }
      );
    },
    saveTrainerInfo() {
      this.$refs.entityFormRef.resetFields();
      this.entityModelVisiable = true;
      this.entityModelTitle =  this.$t('deviceP.editDevice') 
      this.entityForm = copyObj(row);
    },
    addTest() {
      this.testDetailVisiable = true;
      this.testForm = {
              lastGrades: 0,
              latestGrades: 0,
              name: "",
              optimalGrades: 0,
              id:'',
            }
    },
    showTest() {
      this.fetchTestDataList();
      this.testListVisiable = true;
    },
  },
};
</script>

<style lang="less">
.testBtn {
  background: rgb(54, 56, 64);
  padding: 5px 10px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}
.avatorBox{
  background:url('../../assets/images/icon_tx_boy.png');
  background-size:contain;
  width:20px;
  height:20px;
  margin:5px;
  margin-left:0
}
.boxForm{
  padding-right: 150px;
  padding-left:50px;
}
.tranBox{
  font-size:12px;
  display:flex;
  align-items:center;
}
.ivu-transfer-list-content-item{
  display:flex;
  
}
.wrapBox{
  border:1px solid #dcdee2;
  border-radius: 4px;
    color: #515a6e;
    background-color: #fff;
    display: inline-block;
    width: 100%;
    min-height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
}

</style>
